<template>
  <el-card :header="headetText">    
    <el-table :data="dataTable" :show-header="true" :highlight-current-row="true" :stripe="true" row-class-name="primary" style="width: 100%" @row-click="onTableRowClicked">
      <el-table-column prop="index" label="index"></el-table-column>
      <el-table-column prop="offset" label="offset"></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import Formater from "@/libs/tools/Formater.js";
export default {
  props: {
    data: Object,
    debug: Object,
  },
  data() {
    return {
      dataTable: [],
      headetText: "Block Restart Offset",
    };
  },
  created() {    
    if (this.data) {
      this.dataTable = this.covertToTable(this.data);
    }
  },
  watch: {
    data(newVal, oldVal) {
      this.dataTable = this.covertToTable(newVal);
      this.headetText = `Block Restart Offset (${this.dataTable.length})` ;
    },
  },
  methods: {
    getTargetItem(item) {
      return "";
    },

    covertToTable(data) {
      let offsets = data.restartOffset;
      let dataTable = [];
      for (let i = 0; i < offsets.length; i++) {
        let item = offsets[i];
        let itemTable = {
          index: i,
          offset: Formater.number(item, 6),
          target: this.getTargetItem(item),
          debug: this.debug?.restartOffset.arr[i],
        }
        dataTable.push(itemTable);
      }
      dataTable.push({
          index: "restart_count",
          offset: Formater.number(data.restartCount, 4),
          debug: this.debug?.iRestartCount,        
      });
      return dataTable;
    },
    
    onTableRowClicked(row, column, event) {
      this.$emit('clicked', row);
    },
  },
  mounted() {

  },
  computed: {
    
  }
};
</script>